import {Component} from 'react';
import {DragSource, DropTarget} from 'react-dnd';

import views from '../../views';
import dndItemTypes from '../../dnd/dndItemTypes';
import dndSource from '../../dnd/dndSource';
import dndTarget from '../../dnd/dndTarget';
import {IView} from '../../types/IView';

export interface CanvasViewProps {
  view: IView;
  refUpdater: (view: IView, ref: any) => void;
  connectDragSource?: (elem: JSX.Element) => JSX.Element | null;
  connectDropTarget: (elem: JSX.Element) => JSX.Element | null;
}

class CanvasView extends Component<CanvasViewProps, undefined> {
  render() {
    const {view, refUpdater, connectDragSource, connectDropTarget} = this.props;
    const viewObject = views[view.viewType];
    return connectDragSource(connectDropTarget(viewObject.render(view, refUpdater)));
  }
}

export default DragSource(dndItemTypes.WIDGET, dndSource.source, dndSource.collect)(
  DropTarget(dndItemTypes.WIDGET, dndTarget.target, dndTarget.collect)(CanvasView)
);
